<template>
  <div class="home">
    <el-container style="height: 100vh">
      <el-aside
        class="aside"
        :style="{ width: `${isCollapse ? 65 : 240}px`, transition: '0.4s' }"
      >
        <el-menu
          router
          :default-active="$route.path"
          background-color="#303133"
          text-color="#bbb"
          :style="{ height: '100vh' }"
          :collapse="isCollapse"
          :unique-opened="true"
          class="el-menu-vertical-demo"
        >
          <el-menu-item>
            <img width="30px" src="" alt="" />
            <template slot="title">
              <el-image
                style="width: 30px; height: 30px"
                :src="require('../assets/logo.png')"
                fit="cover"
              ></el-image>
              <span style="font-size: 1.2em; color: #efefef; font-weight: bold"
                >&nbsp;&nbsp;驾考通后台管理系统</span
              >
            </template>
          </el-menu-item>
          <el-menu-item index="/home/index">
            <i class="el-icon-message"></i>
            <template slot="title">首页</template>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">驾校管理</span>
            </template>
            <el-menu-item index="/home/driverschool-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">驾校列表</span>
            </el-menu-item>
            <el-menu-item index="/home/driverschool-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增驾校</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">教练管理</span>
            </template>
            <el-menu-item index="/home/coach-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">教练列表</span>
            </el-menu-item>
            <el-menu-item index="/home/coach-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增教练</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item index="/home/user-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">用户列表</span>
            </el-menu-item>
            <el-menu-item index="/home/user-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增用户</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">习题管理</span>
            </template>
            <el-menu-item index="/home/exercises-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">习题列表</span>
            </el-menu-item>
            <el-menu-item index="/home/exercises-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增习题</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">资讯管理</span>
            </template>
            <el-menu-item index="/home/information-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">资讯列表</span>
            </el-menu-item>
            <el-menu-item index="/home/information-add">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">新增资讯</span>
            </el-menu-item>
          </el-submenu>

          <!-- <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">轮播图管理</span>
            </template>
            <el-menu-item index="/home/carousel-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">轮播图列表</span>
            </el-menu-item>
            <el-menu-item index="/home/carousel-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增轮播图</span>
            </el-menu-item>
          </el-submenu> -->

          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">管理员管理</span>
            </template>
            <el-menu-item index="/home/admin-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">管理员列表</span>
            </el-menu-item>
            <el-menu-item index="/home/admin-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增管理员</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="header">
          <i
            v-show="!isCollapse"
            class="el-icon-s-fold"
            @click="isCollapse = true"
          ></i>
          <i
            v-show="isCollapse"
            class="el-icon-s-unfold"
            @click="isCollapse = false"
          ></i>
          <!-- 面包屑导航 -->
          <el-breadcrumb separator="/" style="flex: 1; margin-left: 20px">
            <el-breadcrumb-item v-for="item in $route.meta.thumb" :key="item">{{
              item
            }}</el-breadcrumb-item>
          </el-breadcrumb>
          <template v-if="user_name">
            <span style="padding-right: 10px"
              >欢迎您：{{ user_name.user_name }}</span
            >
            <el-button type="info" size="small" @click="exit">退出</el-button>
          </template>
          <template v-else>
            <span>未登录</span>
          </template>
        </el-header>

        <el-main>
          <!-- 二级路由所需要显示的内容 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState } from "vuex";

export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    exit() {
      this.$store.commit("updateUser", "");
      this.$store.commit("saveToken", "");
      this.$router.push("/login");
    },
  },
  computed: {
    ...mapState(["user_name"]),
  },
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;

  i {
    font-size: 1.3em;
  }
}
.aside::-webkit-scrollbar {
  display: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
</style>
